<template>
  <div class="main">


    <el-input v-model="keywords" placeholder="请输入内容" style="width:300px;">
      <template #append>
        <el-button :icon='Search'></el-button>
      </template>
    </el-input>
    <el-button type="primary" style="margin-left:20px" @click="add">添加用户</el-button>



    <el-table :data="ListData" style="width: 100%;       margin-top:20px;">
      <el-table-column prop="id" label="用户id" />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="mobile" label="电话" />
      <el-table-column prop="role_name" label="角色" />
      <el-table-column prop="mg_state" label="状态">
        <template #default="scope">
          <el-switch v-model="scope.row.mg_state" />
        </template>
      </el-table-column>


      <el-table-column label="操作">
        <template #default="scope">
          <div>
            <el-button size="small" type="primary">
              <!-- 设置编辑文本提示 -->

              <el-icon @click="update(scope.row.id)">
                <Edit />
              </el-icon>
            </el-button>

            <!-- //删除按钮 -->
            <el-button @click="dele(scope.row.id)" size="small" type="danger">
              <el-icon>
                <DeleteFilled/>
              </el-icon>
            </el-button>


            <el-button size="small" type="warning"  @click="tianjia(scope.row.id)">
              <el-icon>
                <Setting />
              </el-icon>
            </el-button>

          </div>
        </template>
      </el-table-column>

    </el-table>


    <div class="page">

      <el-pagination v-model:currentPage="pagenum" v-model:page-size="pagesize" :page-sizes="[2, 4, 6, 8]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" :default-page-size='pagesize'
        @size-change='sizeChange' @current-change='currentChange' />


    </div>

    <!-- 添加用户 -->
    <addOrUpdate ref="addOrUpdateRef" @over="over"></addOrUpdate>




    <fenpei ref = "fenpeiRef"></fenpei>

  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { getUserList , deleteUser } from "../../api/user.js";
import { Edit, DeleteFilled, Setting, ArrowRight, Search, WarningFilled } from '@element-plus/icons-vue'
//引入添加编辑组件
import addOrUpdate from './components/add-or-update.vue'
//引入删除组件
import deleted from "./components/dele.vue";
//引入分配组件
import fenpei from './components/fenpei.vue';
let router = useRouter();
// //设置用户数据列表的响应式数据
// // import {useRouter} from 'vue-router'
let keywords = ref("")
let pagenum = ref(1);
let pagesize = ref(2);
let query = ref("");
let ListData = ref([]);
let total = ref(0)
let id = ref('')
//设置对话文本框
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
// 设置删除提示文本框
const centerDialogVisible = ref(false)
const form = reactive({
  name: '',
  email: '',
  modile: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})



let getUserDataL = async () => {
  let data = reactive({
    query: query.value,
    pagenum: pagenum.value,
    pagesize: pagesize.value,
  })

  console.log(data);
  let res = await getUserList(data)
  ListData.value = res.data.data.users;
  // console.log(ListData);
  total.value = res.data.data.total;
  // id.value = res.data.data.users


}
getUserDataL()

// let deleUser = async ()=>{
//   let res = await deleteUser()
// }



//当每页显示条数发生改变时触发
let sizeChange = (value) => {
  pagesize.value = value;
  getUserDataL();
  console.log(pagesize.value);

}

let currentChange = (value) => {

  pagenum.value = value;
  getUserDataL();
  console.log(pagenum.value);
}



//子组件实例
let addOrUpdateRef = ref(null)
let deleRef = ref(null)
let fenpeiRef = ref(null)
//添加用户
let add = () => {
  console.log(addOrUpdateRef);
    addOrUpdateRef.value.init();
}
let over = () => {
  getUserDataL();
}
//编辑用户
let update = (id) => { 
  // 调用子组件中init方法
  addOrUpdateRef.value.init(id);
}
//删除用户
let dele = async (id)=>{
  let  res = await deleteUser(id)
  console.log(res);
  getUserDataL()
}

let  tianjia = (id)=>{
  console.log(id);
  fenpeiRef.value.init(id);
  console.log("2");
}
</script>


<style>
.main {
  padding: 0px 20px
}

.page {
  background: #fff;
  margin-top: 10px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.warnIcon {
  padding-top: 10px;
}
</style>